<template>
  <div class="edit-box">
    <div class="image-item" v-if="formData.approved_status ==1"></div>
    <el-form label-width="120px" class="form-grid" :model="formData">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="用户ID"><el-input v-model="formData.user_id" readonly /></el-form-item>
          <el-form-item label="姓名"><el-input v-model="formData.real_name" readonly /></el-form-item>
          <el-form-item label="身份证号"><el-input v-model="formData.id_card_number" readonly /></el-form-item>
          <el-form-item label="身份证">
            <div class="card-box">

               <el-image :src="$imageFull(formData.card_face)" style="width: 150px;" />
               <el-image :src="$imageFull(formData.card_bg)" style="width: 150px;" />
            </div>
          </el-form-item>
           <el-form-item label="性别">
             <el-tag
               :type="SEX[String(formData.sex)] && SEX[String(formData.sex)].type"
               disable-transitions
             >
               <i
                 :class="SEX[String(formData.sex)] && SEX[String(formData.sex)].icon"
                 style="margin-right: 4px"
               />
               {{ SEX[String(formData.sex)] ? SEX[String(formData.sex)].text : '未知' }}
             </el-tag>

           </el-form-item>
          <el-form-item label="电话"><el-input v-model="formData.tel" readonly /></el-form-item>
          <el-form-item label="提交时间"><el-input v-model="formData.update_time" readonly /></el-form-item>


        </el-col>
      </el-row>
    </el-form>

    <div class="approved-box" v-if="formData.approved_status ==0 || formData.approved_status ==2">
      <el-divider>审核</el-divider>
      <el-radio v-model="radio" label="1">通过</el-radio>
      <el-radio v-model="radio" label="2">拒绝</el-radio>
      <el-input type="textarea" v-model="remark" :rows="3" placeholder="拒绝原因" style="margin-top: 30px;" />

      <div class="bt-box"><el-button type="primary" round @click="handleOk">确定</el-button></div>
    </div>



  </div>
</template>



<script>
  import {
    SEX
  } from '@/constants/statusMap';
  export default {
    name: "ReviewDetail",
    props: {
      formData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        SEX,
        radio: '0',
        remark: "",

      };
    },
    methods: {
      handleOk() {
        let param={}
        param.approved_status = this.radio*1
        param.approved_reason = this.remark
        param.id=this.formData.id
        this.$emit('approve',param)

      }
    }
  }
</script>

<style scoped>
  .card-box{
    display: flex;
    align-items: center;
  }
  .action-status {
    padding-left: 20px;
  }

  .edit-box {
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
    position: relative;

  }

  .image-item {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0902/969ec202509021711332984.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: 900;
  }

  .form-grid .el-form-item {
    margin-bottom: 20px;
  }

  .full-width {
    margin-top: 20px;
  }

  .full-width .el-input {

    width: 100%;
  }

  .btn-group {
    text-align: center;
  }

  .bt-box {
    margin: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .approved-box {
    padding: 30px;
    box-sizing: border-box;
  }
</style>
